<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>样本数据</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/table.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script>
        function editKB(machineId){
            window.open("${URL_QULITITY_TOKBLIST}?id="+machineId);
        }
        function toRecord(id){
            window.open("${URL_QULITITY_TORECORD}"+"?machineId="+id);
        }
        function quadata(id){
            window.open("${URL_QULITITY_TOQUADATA}"+"?machineId="+id);
        }

        function showResult(row){
            var data= $('#example').DataTable().rows(row).data()[0];
            window.location.href ='${URL_INSTRUMENT_TOSHOW}?mkMedicalInstrumenId=' + data.mkMedicalInstrumenId;
        }
    </script>
</head>
<body>
<div class="wrap">
    <div class="page-header">
        <!-- /.page-header -->
        <ul class="page_nav">
            <li class="first cur">医卫士云平台&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="cur">数据查询&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>仪器监控</li>
        </ul>
    </div>
    <div class="form">
        <div class="select">
            <label>所在城市:</label>
            <select id="provinceArea" >
                <option value="">省</option>
            </select>
            <select id="cityArea">
                <option value="">市</option>
            </select>
            <label>所在医院:</label>
            <select id="hospitalList">
                <option value=""></option>
            </select>
        </div>
        <label>仪器SN号:</label>
        <input id="mkMedicalInstrumenId" type="text" class="SN" placeholder="SN号">
        <label>未使用天数:</label>
        <input id="number" type="text" class="SN" placeholder="查询出大于未使用天数的仪器">
        <input id="query" type="button" value="搜索" class="search" onclick="refreshTable();">
        <span class="clear" onclick="cleanForm()">清除条件</span>
    </div>

    <div id="tablepart">
        <table id="example" class="display" cellspacing="10" width="100%">
            <thead>
            <tr>
                <th width="18%">仪器SN号</th>
                <th width="14%">设备名称</th>
                <th width="10%">装机人员</th>
                <th width="15%">安装日期</th>
                <th width="15%">安装地址</th>
                <th width="15%">最近一次使用时间</th>
                <th width="15%">使用状态</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<script>
    $(function () {
        getLowerAreaList("provinceArea", "", 0);
        resetArea(1);

        $("#provinceArea").change(function () {
            if (this.value == null || this.value == "") {
                resetArea(1);
            } else {
                getLowerAreaList("cityArea", this.value, 1);
                resetArea(2);
            }
        });
        $("#cityArea").change(function () {
            var areaCode = $("#cityArea").val();
            if (this.value == null || this.value == "") {
                resetArea(1);
            } else {
                getHospitalList(areaCode);
                resetArea(2);
            }
        });
    });

    function resetArea(level){
        if(level<1){
            var provinceArea = document.getElementById("provinceArea");
            provinceArea.options.length = 1;
        }
        if(level<2){
            var cityArea = document.getElementById("cityArea");
            cityArea.options.length = 1;
        }
    }
    /**
     * 后台获取下级列表
     * */
    function getLowerAreaList(id,code,level){
        $.ajax({
            url:'${ctx}/area/getLowerAreaList',
            type:'post',
            dataType: 'json',
            data:'code='+code+"&level="+level,
            error:function(){
                alert('error');
            },
            success:function(data){
                var objs = document.getElementById(id);
                objs.options.length = 1;
                var area = data;
                for(var i=0;i<area.length;i++){
                    var childOption = document.createElement("option");
                    childOption.value = area[i].code;
                    childOption.innerHTML = area[i].name;
                    objs.appendChild(childOption);
                }
            }
        });
    }
    /**
     * 根据地区编号获得所在地区的医院
     * */
    function getHospitalList(code){
        $.ajax({
            url:'${ctx}/hospital/getHospitalList',
            type:'post',
            data:'areaCode='+code,
            dataType: 'json',
            error:function(){
                alert('error');
            },
            success:function(data){
                var objs = document.getElementById("hospitalList");
                objs.options.length = 1;
                var area = data;
                for(var i=0;i<area.length;i++){
                    var childOption = document.createElement("option");
                    childOption.value = area[i].id;
                    childOption.innerHTML = area[i].hospName;
                    objs.appendChild(childOption);
                }
            }
        });
    }
    var table;
    function initTable() {
        table = $('#example').DataTable({
            "bFilter": false,//去掉搜索框
            "bAutoWidth": true, //自适应宽度
            "sPaginationType" : "full_numbers",
            "ordering": false,//是否允许Datatables开启排序
            "bProcessing" : true,
            "bServerSide" : true,
            /* "scrollY": "500px",
             "scrollCollapse": "true", */
            "sAjaxSource":"${URL_INSTRUMENT_SEARCH}",
            "sAjaxDataProp": "dataList",//查询后，返回的集合
            "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
                aoData.push(
                    { "name": "mkMedicalInstrumenId", "value": $("#mkMedicalInstrumenId").val() },
                    { "name": "number", "value": $("#number").val() },
                    { "name": "provinceArea", "value": $("#provinceArea").val() },
                    { "name": "cityArea", "value": $("#cityArea").val() },
                    { "name": "hosId", "value": $("#hospitalList").val() }
                );
                $.ajax( {
                    "dataType": 'json',
                    "url": sSource,
                    "type":'post',
                    "data": aoData,
                    "success": fnCallback
                } );

            },

            "aoColumns" : [{
                "mDataProp" : "mkMedicalInstrumenId",
            }, {
                "mDataProp" : "instrumentName"
            }, {
                "mDataProp" : "installMan"
            }, {
                "mDataProp" : "installTime"
            }, {
                "mDataProp" : "hospName"
            }, {
                "mDataProp" : "lastTime"
            }, {
                "mDataProp" : "useStatus",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if(oData.color == "black") {
                        $(nTd).html(sData);
                    } else {
                        $(nTd).html('<div style="color: ' + oData.color + '" >' + sData + '</div>');
                    }
                }
            }],

            "aoColumnDefs":[{"aTargets":[0],"mRender":function(data,type,full,meta){
                return '<a style="color: #4c84ff; text-decoration: underline" href="#" onclick="showResult('+ meta.row +')">'+ data +'</a>';
            }
            }],

            "createdRow": function ( row, data, index ) {

                $('td', row).eq(0).addClass('border_left');
                $('td', row).eq(6).addClass('border_right');

            },
            "oLanguage": {//插件的汉化
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                },
                "sZeroRecords": "没有检索到数据",
                "sProcessing": "<img src='' />",
                "sSearch": "搜索"
            }
        } );
    }
    $(document).ready(function() {
        initTable();
        $('#example tr th').eq(0).addClass('border_left');
        $('#example tr th').eq(6).addClass('border_right');
        $('#example tbody tr td').addClass('active');
        $('#example tr td').eq(6).addClass('border_right');
        $('#example_paginate').parent().addClass('pagewidth');
        $('#example_info').parent().addClass('showPage');
        $('#example_length').parent().addClass('pageNow');
    });

</script>
</body>
</html>